<template>
  <div class="issueresults">
    <div class="card flex row_bet col_center flex_wrap" style="padding: 23px 26px;">
      <div class="flex flex_wrap col_center" style="margin-bottom:5px;">
        <span>组员：</span>
        <a-select
          label-in-value
          style="width: 207px;margin-right: 5px;"
          placeholder="请选择组员"
          @change="handleChange"
          class="br4"
          v-model="userid"
          allowClear
        >
          <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
            {{ v.user }}
          </a-select-option>
        </a-select>
        <span>时间范围：</span>
        <a-range-picker
          :ranges="{
            本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
            上周: [
              moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
              moment().subtract(parseInt(moment().format('d')), 'days')
            ],
            本月: [
              moment()
                .month(moment().month())
                .startOf('month'),
              moment()
                .month(moment().month())
                .endOf('month')
            ],
            上月: [
              moment(
                moment()
                  .subtract(1, 'month')
                  .format('YYYY-MM') + '-01'
              ),
              moment(
                moment()
                  .subtract(1, 'month')
                  .format('YYYY-MM') + '-01'
              )
                .subtract(-1, 'month')
                .add(-1, 'days')
            ],
            半年: [
              moment()
                .startOf('day')
                .subtract(6, 'month'),
              moment()
            ]
          }"
          v-model="timearr"
          format="YYYY-MM-DD"
          @change="timeChange"
          style="width:230px;"
        >
          <!--            <div class="flex row_around col_center" style="height:30px;border: 1px solid rgb(232, 233, 234);border-radius: 4px;">-->
          <!--              <span class="m_l_10">{{ pass }}</span>-->
          <!--              <a-icon type="calendar" style="float: right;"/>-->
          <!--            </div>-->
        </a-range-picker>
      </div>
      <div class="flex flex_wrap">
        <a-button @click="doreset" style="margin-right:5px;">重置</a-button>
        <a-button type="primary" :disabled="btnloading" @click="donext">
          <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
          {{ btnloading===true?'查询中...':'查询' }}
        </a-button>
      </div>
    </div>
    <a-card
      :bordered="false"
      style="border-radius:8px;margin-top: 10px;"
      :bodyStyle="{ padding: '14px 23px 8px 23px' }">
      <div class="flex row_bet">
        <div class="card_title" style="margin-bottom:11px;">
          数据指标
        </div>
      </div>
      <div class="header_box">
        <div class="header-info">
          <div class="title">付款金额</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.alipayAmt == null ? 0 : Number(service.alipayAmt)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">付款笔数</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.alipayNum == null ? 0 : Number(service.alipayNum)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">预估服务费</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.preServiceFee == null ? 0 : Number(service.preServiceFee)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">结算金额</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.pubCmAmt == null ? 0 : Number(service.pubCmAmt)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">结算笔数</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="service.cm_alipayNum == null ? 0 : Number(service.cm_alipayNum)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">结算服务费</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="0"
              :endVal="Number(service.cmServiceFee)"
              :duration="3000"></countTo>
          </div>
        </div>
      </div>
    </a-card>
    <div style="margin-top: 10px;">
      <a-row type="flex" justify="space-between" :gutter="[12, 13]">
        <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="card" style="padding:15px;">
            <div class="flex row_bet col_center">
              <div class="card_title">服务费走势</div>
              <a-radio-group v-model="status" @change="statusChange">
                <a-radio-button :value="1">
                  预估数据
                </a-radio-button>
                <a-radio-button :value="2">
                  结算数据
                </a-radio-button>
              </a-radio-group>
            </div>
            <div class="chart">
              <v-chart :forceFit="true" :height="219" :data="linedata" :scale="scale2" padding="auto">
                <v-tooltip/>
                <v-axis/>
                <v-stack-area
                  position="addDate*price"
                  color="l(90) 0:#4988f2 1:#ffffff"
                  opacity="0.85"
                  shape="smooth"
                ></v-stack-area>
              </v-chart>
            </div>
          </div>
        </a-col>
        <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="card" style="padding:15px;">
            <div class="card_title">指数雷达图</div>
            <div style="height:219px;">
              <v-chart
                force-fit="true"
                height="219"
                :data="data"
                :scale="scale"
                padding="auto">
                <v-tooltip/>
                <v-axis
                  :dataKey="axis1Opts.dataKey"
                  :line="axis1Opts.line"
                  :tickLine="axis1Opts.tickLine"
                  :grid="axis1Opts.grid"/>
                <v-coord type="polar" :radius="0.8"/>
                <v-line position="item*score" color="user" :size="2"/>
                <v-area position="item*score" color="user"/>
              </v-chart>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px;">
      <div class="card_title">
        商品列表
      </div>
      <div class="groupbox flex row_bet flex_wrap">
        <div class="btns" style="margin-bottom:5px;">
          <a-radio-group class="br4" :value="type" @change="dobtns">
            <a-radio-button :value="1">
              出单汇总
            </a-radio-button>
            <a-radio-button :value="2">
              实时出单
            </a-radio-button>
          </a-radio-group>
        </div>
        <div class="flex flex_wrap col_center">
          <a-input
            v-model="eventId"
            class="br4"
            style="width:120px;margin-right:5px;margin-bottom:5px;"
            placeholder="活动ID"
            allowClear/>
          <a-input
            v-model="search"
            class="br4"
            style="width:200px;margin-right:5px;margin-bottom:5px;"
            placeholder="标题/商品ID/店铺名"
            allowClear/>
          <a-button type="primary" :disabled="btnloading2" class="br4" @click="dopasssearch" style="margin-right:5px;margin-bottom:5px;">
            <a-icon v-if="btnloading2" type="reload" :spin="btnloading2"/>
            {{ btnloading2===true?'搜索中...':'搜索' }}
          </a-button>
          <a-button class="br4" @click="exportToExcel" style="margin-bottom:5px;">导出</a-button>
        </div>
      </div>
      <div class="activitytable">
        <a-table
          :columns="columns"
          :rowKey="activity => activity.itemId"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="itemId" slot-scope="text, row">
            <div class="goodsinfo">
              <div class="line-1" style="width:289px">
                <a :href="'https://detail.tmall.com/item.htm?id='+row.itemId" target="_blank" rel="noopener noreferrer">
                  {{ row.title }}</a></div>
              <div>商品ID:{{ row.itemId }}</div>
            </div>
          </div>
          <div slot="startTime" slot-scope="text, row">
            <div>起:{{ row.startTime }}</div>
            <div>止:{{ row.endTime }}</div>
          </div>

          <div slot="serviceRate" slot-scope="text, row">
            <div>{{ row.serviceRate }}%</div>
          </div>
          <template slot="footer" style="padding-right: 0">
            <div class="flex row_bet">
              <span style="width: 350px">总计：</span>
              <span class="text_center" style="width: 183px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 181px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 120px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 160px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 102px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 103px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 86px">{{ info.order_num===null? 0 : info.order_num }}</span>
              <span
                class="text_center"
                style="width: 102px">{{ info.is_alipayFee===null? 0 : info.is_alipayFee }}</span>
              <span class="text_center" style="width: 129px">{{ info.is_goodsNum===null? 0 : info.is_goodsNum }}</span>
              <span
                class="text_center"
                style="width: 119px">{{ info.is_serviceFee===null? 0 : info.is_serviceFee }}</span>
            </div>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>
<script>
  import moment from 'moment'
  import countTo from 'vue-count-to'
  import { getGrounpInfo, getGroupAbility, getGroupGoodsOrder, getGroupServiceTrends } from '@/api/teamApi'
  import { exportExcel } from '@/assets/js/Export2Excel'

  export default {
    name: 'Issueresults',
    components: {
      countTo
    },
    data () {
      return {
        moment,
        scale: [{
          dataKey: 'score',
          min: 0
        }],
        axis1Opts: {
          dataKey: 'item',
          line: null,
          tickLine: null,
          grid: {
            lineStyle: {
              lineDash: null
            },
            hideFirstLine: false
          }
        },
        timearr: [],
        startVal: 0,
        endVal: 0,
        loading: false,
        user_id: '',
        userid: [],
        service: {
          alipayAmt: 0, //  付款金额
          alipayNum: 0, //  付款数
          preServiceFee: 0, // 预估服务费
          pubCmAmt: 0, // 结算金额
          cm_alipayNum: 0, // 结算笔数
          cmServiceFee: 0 // 结算服务费
        },
        info: {
          order_num: 0,
          is_alipayFee: 0,
          is_goodsNum: 0,
          is_serviceFee: 0
        },
        classList: [],
        type: 1,
        status: 1,
        search: '',
        eventId: '',
        columns: [
          {
            title: '商品信息',
            align: 'left',
            width: 302,
            dataIndex: 'itemId',
            scopedSlots: {
              customRender: 'itemId'
            }
          },
          {
            title: '订单时间',
            width: 183,
            align: 'center',
            dataIndex: 'is_addTime',
            scopedSlots: {
              customRender: 'is_addTime'
            }
          },
          {
            title: '店铺',
            width: 181,
            align: 'center',
            dataIndex: 'shopTitle',
            scopedSlots: {
              customRender: 'shopTitle'
            }
          },
          {
            title: '活动ID',
            width: 120,
            align: 'center',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '排期时间',
            align: 'center',
            width: 160,
            dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '商品单价',
            align: 'center',
            width: 102,
            dataIndex: 'is_goodsPrice',
            scopedSlots: {
              customRender: 'is_goodsPrice'
            }
          },
          {
            title: '服务费率',
            align: 'center',
            width: 103,
            dataIndex: 'is_serviceRate',
            scopedSlots: {
              customRender: 'is_serviceRate'
            }
          },
          {
            title: '订单数',
            align: 'center',
            width: 86,
            dataIndex: 'order_num',
            scopedSlots: {
              customRender: 'order_num'
            }
          },
          {
            title: '支付金额',
            align: 'center',
            width: 102,
            dataIndex: 'is_alipayFee',
            scopedSlots: {
              customRender: 'is_alipayFee'
            }
          },
          {
            title: '下单数量',
            align: 'center',
            width: 129,
            dataIndex: 'is_goodsNum',
            scopedSlots: {
              customRender: 'is_goodsNum'
            }
          },
          {
            title: '预估服务费',
            align: 'center',
            width: 119,
            dataIndex: 'is_serviceFee',
            scopedSlots: {
              customRender: 'is_serviceFee'
            }
          }
        ],
        activity: [
          //   {
          //   title: '桌布布艺防水防油免洗北欧ins网红长方形餐桌布茶几pvc学生书桌垫', // 标题
          //   itemId: '607093302330', // 商品id
          //   is_addTime: '2020-11-13 00:00:00', // 订单时间
          //   shopTitle: '怡沁园旗舰店', // 店铺名称
          //   eventId: '386683456', // 活动id
          //   startTime: '2020-10-28', // 开始时间
          //   endTime: '2020-11-30', // 结束时间
          //   is_goodsPrice: '31.00', // 单价
          //   is_serviceRate: '8.00%', // 服务费率
          //   order_num: 37, // 订单数
          //   is_alipayFee: '755.77', // 支付金额
          //   is_goodsNum: '100160.00', // 下单数
          //   is_serviceFee: '60.43' // 预估服务费
          // }
        ],
        pagination: {
          pageSize: 15,
          page: 1
        },
        start: null,
        end: null,
        linedata: [],
        arr1: [],
        arr2: [],
        scale2: [
          {
            dataKey: 'price',
            min: 0
          },
          {
            dataKey: 'addDate',
            type: 'time',
            mask: 'YYYY-MM-DD'
          }],
        data: [],
        btnloading: false,
        btnloading2: false

      }
    },
    computed: {},
    created () {
      this.getGrounpInfo()
      this.getGroupAbility()
      this.getGroupServiceTrends()
      this.getGroupGoodsOrder(1, 15)
    },
    mounted () {

    },
    methods: {
      getGroupAbility () {
        getGroupAbility({
          start: this.start,
          end: this.end,
          user_id: this.user_id
        })
          .then(res => {
            // console.log(res)
            this.service = res.data
            // console.log(Object.getOwnPropertyNames(res.data.array).length)
            const DataSet = require('@antv/data-set')
            const sourceData = [
              { item: '佣金比例', a: Number(res.data.array.commissionRate) },
              { item: '服务费率', a: Number(res.data.array.serviceRate) },
              { item: '预估服务费', a: Number(res.data.array.avg_service) },
              { item: '结算服务费', a: Number(res.data.array.cmServiceFee) },
              { item: '跑单指数', a: Number(res.data.array.pao_dan_num) },
              { item: '商品销量', a: Number(res.data.array.biz30day) }
            ]

            const dv = new DataSet.View().source(sourceData)
            dv.transform({
              type: 'fold',
              fields: ['a'],
              key: 'user',
              value: 'score'
            })
            this.data = dv.rows
          })
          .catch(err => {
            console.log(err)
          })
      },
      doreset () {
        this.user_id = null
        this.userid = []
        this.timearr = []
        this.start = null
        this.end = null
      },
      donext () {
        this.btnloading = true
        this.getGroupAbility()
        this.getGroupServiceTrends()
        this.getGroupGoodsOrder(1, 15)
      },
      getGroupServiceTrends () {
        getGroupServiceTrends({
          start: this.start,
          end: this.end,
          user_id: this.user_id
        }).then(res => {
          console.log(res)
          const arr = []
          const arr2 = []
          for (let i = 0; i < res.data.length; i++) {
            const obj = {}
            obj.addDate = res.data[i].addDate
            obj.price = Number(res.data[i].orderServiceFee)
            arr.push(obj)
            const obj2 = {}
            obj2.addDate = res.data[i].addDate
            obj2.price = Number(res.data[i].cmServiceFee)
            arr2.push(obj2)
          }
          console.log(arr)
          this.arr1 = arr
          this.arr2 = arr2
          this.linedata = arr
        }).catch(err => {
          console.log(err)
        })
      },
      getGrounpInfo () {
        getGrounpInfo().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.classList = res.data
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getGroupGoodsOrder (page, pagesize) {
        this.loading = true
        getGroupGoodsOrder({
          page: page,
          pagesize: pagesize,
          type: this.type,
          start: this.start,
          end: this.end,
          user_id: this.user_id,
          is_eventId: this.eventId,
          search: this.search
        }).then(res => {
          console.log(res)
          this.activity = res.data.data.data
          this.info = res.data.info
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.data.count
          this.pagination = pagination
          this.btnloading = false
          this.btnloading2 = false
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      },
      statusChange (e) {
        // console.log(this.status)
        if (this.status === 1) {
          this.linedata = this.arr1
        } else {
          this.linedata = this.arr2
        }
      },
      dopasssearch () {
        //   console.log(this.search)
        this.btnloading2 = true
        this.getGroupGoodsOrder(1, 15, this.type, this.eventId, this.search)
      },
      dobtns (val) {
        console.log(val)
        this.type = val.target.value
        this.getGroupGoodsOrder(1, 15, this.type, this.eventId, this.search)
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getGroupGoodsOrder(params.page, 15)
      },
      timeChange (dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        if (dates.length === 0) {
          this.start = null
          this.end = null
        } else {
          this.start = dates[0].unix()
          this.end = dates[1].unix()
          console.log(this.start, this.end)
        }
        // this.getGroupAbility()
        // this.getGroupServiceTrends()
        // this.getGroupGoodsOrder(1, 15)
      },
      handleChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.user_id = null
        } else {
          this.user_id = value.key
        }
      },
      exportToExcel () {
        require.ensure([], () => {
          const tHeader = ['商品名称', '原价', '券后价', '30天销量', '店铺名称', '开始时间', '结束时间', '通过时间',
            '佣金比例', '服务费', '最新佣金', '服务费', '有效订单数']// Excel的表格第一行的标题
          const filterVal = ['title', 'zkFinalPrice', 'couponZkFinalPrice', 'biz30day', 'shopTitle', 'startTime',
            'endTime', 'passDate', 'commissionRate', 'serviceRate', 'new', 'serviceFee', 'alipayNum'
          ]
          const list = this.activity
          const excelName = '商品列表数据'// 报表名称
          const data = this.formatJson(filterVal, list)
          exportExcel(tHeader, data, excelName)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .issueresults {
    /deep/ .ant-select-selection {
      border-radius: 4px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-btn {
      border-radius: 4px;
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 22px;
      font-weight: 600;
    }

    .header_box {
      min-height: 101px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .header-info {
        .title {
          color: rgba(16, 16, 16, 0.7);
          font-size: 12px;
        }

        .datainfo {
          font-size: 28px;
          color: #101010;
          font-weight: 600;
        }
      }
    }

    .groupbox {
      margin-bottom: 16px;

      /deep/ .ant-radio-wrapper {
        color: #96989b;
        font-weight: 600;
      }

      /deep/ .ant-radio {
        display: none;
      }

      /deep/ .ant-radio-wrapper-checked {
        font-weight: 600;
        color: #101010;
      }

      /deep/ .ant-input {
        border-radius: 4px;
        height: 30px;
      }

      .btns {
        /deep/ .ant-btn {
          height: 30px;
        }
      }
    }

    .goodsinfo {
      .info-right {
        width: 300px;
        height: 100%;
        text-align: left;
      }
    }

    .activitytable {
      /deep/ .ant-table-footer {
        padding-right: 0 !important;
      }
    }

    .chart {
      width: 100%;
      height: 219px;
    }
  }
</style>
